<template>
  <div class="tab-content">
    <ModuleSection title="财务管理" icon="fas fa-money-bill-wave">
      <ModuleMenu :items="financeMenuItems" />
    </ModuleSection>
    
    <ModuleSection title="我的薪资" icon="fas fa-money-check-alt">
      <ListItem 
        v-for="item in salaryList" 
        :key="item.id"
        :title="item.title"
        :description="item.description"
        :icon="item.icon"
        :bgColor="item.bgColor"
      />
    </ModuleSection>
  </div>
</template>

<script>
import ModuleSection from '../common/ModuleSection.vue'
import ModuleMenu from '../common/ModuleMenu.vue'
import ListItem from '../common/ListItem.vue'

export default {
  name: 'FinanceModule',
  components: {
    ModuleSection,
    ModuleMenu,
    ListItem
  },
  data() {
    return {
      financeMenuItems: [
        { id: 1, name: '费用报销', icon: 'fas fa-receipt', bgColor: 'bg-green', path: '/finance/expense' },
        { id: 2, name: '工资查询', icon: 'fas fa-money-check-alt', bgColor: 'bg-blue', path: '/finance/salary' },
        { id: 3, name: '发票管理', icon: 'fas fa-file-invoice', bgColor: 'bg-purple', path: '/finance/invoice' },
        { id: 4, name: '预算管理', icon: 'fas fa-chart-pie', bgColor: 'bg-orange', path: '/finance/budget' },
        { id: 5, name: '出差申请', icon: 'fas fa-plane', bgColor: 'bg-cyan', path: '/finance/travel' },
        { id: 6, name: '财务报表', icon: 'fas fa-chart-line', bgColor: 'bg-red', path: '/finance/report' }
      ],
      salaryList: [
        { 
          id: 1, 
          title: '2023年5月工资', 
          description: '发放日期: 2023-06-05, 状态: 已发放',
          icon: 'fas fa-money-check-alt',
          bgColor: 'bg-green'
        },
        { 
          id: 2, 
          title: '2023年4月工资', 
          description: '发放日期: 2023-05-05, 状态: 已发放',
          icon: 'fas fa-money-check-alt',
          bgColor: 'bg-green'
        },
        { 
          id: 3, 
          title: '2023年度绩效奖金', 
          description: '发放日期: 2023-03-15, 状态: 已发放',
          icon: 'fas fa-award',
          bgColor: 'bg-orange'
        }
      ]
    }
  }
}
</script>

<style scoped>
.tab-content {
  padding: 16px;
}
</style> 